<template>
  <div class="apply-dialog">
    <div v-if="thisDiv === 1 || thisDiv === 2">
      <div class="title" style="display: flex;">
        <div style="flex: 1; text-align: left;padding-left: 30px;font-size: 25px;">
          {{ models.eventName }}
        </div>
        <div class="btn-list flex flex-row align-center">
          <el-button type="warning" size="mini" :loading="saveLoading" @click="saveAction">暂存</el-button>
          <el-button type="primary" size="mini" :loading="submitLoading" @click="submitAction">上报</el-button>
          <el-button type="info" size="mini" @click="handleClose">返回</el-button>
        </div>
      </div>
      <el-form
        ref="generateForm"
        label-suffix=":"
        size="small"
        :model="models"
        :rules="rules"
        label-position="right"
        label-width="130px"
      >
        <div >
          <title-info title="上报⼈信息" >
            <reporter-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事人信息" >
            <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事患者信息" >
            <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="事件信息" >
            <event-info slot="left" :form-data="models" :this-div="thisDiv">
              <div slot="right" style="width: 100%" />
              <el-form-item slot="right" label="报告类型" prop="baqsjRecordHandle.reportType">
                <el-radio-group v-model="models.baqsjRecordHandle.reportType">
                  <el-radio v-for="(item, index) in reportTypeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <div slot="right" style="width: 100%" />
              <el-form-item slot="right" label="报告单位类别" prop="baqsjRecordHandle.reportUnitType">
                <el-radio-group v-model="models.baqsjRecordHandle.reportUnitType">
                  <el-radio v-for="(item, index) in reportUnitTypeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
                <el-input
                  v-if="models.baqsjRecordHandle.reportUnitType && models.baqsjRecordHandle.reportUnitType === '5'"
                  :style="{ width: '200px', 'margin-left': '5px' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordHandle.reportUnitTypeOther"
                />
              </el-form-item>
            </event-info>
          </title-info>
        </div>
        <!-- 怀疑用药 -->
        <div>
          <title-info title="怀疑用药">
            <div slot="left">
              <el-table :data="models.baqsjRecordUntowardeffectDrugDoubtList" stripe>
                <el-table-column label="添加" align="right" class-name="small-padding fixed-width" width="60">
                  <template slot="header" slot-scope="scope">
                    <i class="el-icon-circle-plus-outline" style="color: #21ba88;font-size: 30px" @click="addUntowardeffectDrugRow(1)" />
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-circle-close" style="color: red;font-size: 30px;" @click="delUntowardeffectDrugRow(1, scope.$index)" />
                  </template>
                </el-table-column>
                <el-table-column label="批准文号" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.approvedBatchNo"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="productName" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.productName"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="通用名称" prop="generalName" align="left" width="180">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.generalName"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                    <div style="width: 100%;display: flex">
                      <div style="width: 80px;margin-right: 10px">剂型</div>
                      <div>
                        <el-input
                          v-model="scope.row.doseMount"
                          placeholder="请点击选择"
                          readonly
                          style="width: 100%;"
                          @click.native="openDialog(scope.$index, scope.row)"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="生产厂家" prop="merchantCompany" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.merchantCompany"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="生产批号" prop="batchNo" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.batchNo"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="用法用量" prop="useMount" align="left" >
                  <template slot-scope="scope">
                    <div>
                      用量
                      <el-input v-model="scope.row.useMount" placeholder="请输入" clearable style="width: 100px;"/>
                      <el-input v-model="scope.row.useUnit" placeholder="单位" clearable style="width: 80px;"/>
                      <el-input v-model="scope.row.useDay" placeholder="请输入" clearable style="width: 80px;"/>
                      日
                      <el-input v-model="scope.row.useTimes" placeholder="请输入" clearable style="width: 80px;"/>
                      次
                    </div>
                    <div >
                      给药途径
                      <el-input v-model="scope.row.useMethod" placeholder="请输入" clearable style="width: 60%"/>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="用药起止时间" prop="startTime" align="left" width="180">
                  <template slot-scope="scope">
                    <div style="display: flex;">
                      <div style="margin-right: 10px">从</div>
                      <div>
                        <el-date-picker
                        v-model="scope.row.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width: 140px;"
                        placeholder="选择日期">
                      </el-date-picker></div>
                    </div>
                    <div style="display: flex">
                      <div style="margin-right: 10px">到</div>
                      <div>
                        <el-date-picker
                          v-model="scope.row.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          style="width: 140px;"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="用药原因" prop="drugReason" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.drugReason"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="selectDrug(1, scope.$index)">选择药品</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </title-info>
        </div>

        <!-- 并用药品 -->
        <div>
          <title-info title="并用药品">
            <div slot="left">
              <el-table :data="models.baqsjRecordUntowardeffectDrugParellList" stripe>
                <el-table-column label="添加" align="right" class-name="small-padding fixed-width" width="60">
                  <template slot="header" slot-scope="scope">
                    <i class="el-icon-circle-plus-outline" style="color: #21ba88;font-size: 30px" @click="addUntowardeffectDrugRow(2)" />
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-circle-close" style="color: red;font-size: 30px;" @click="delUntowardeffectDrugRow(2, scope.$index)" />
                  </template>
                </el-table-column>
                <el-table-column label="批准文号" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.approvedBatchNo"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="productName" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.productName"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="通用名称" prop="generalName" align="left" width="180">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.generalName"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                    <div style="width: 100%;display: flex">
                      <div style="width: 80px;margin-right: 10px">剂型</div>
                      <div>
                        <el-input
                          v-model="scope.row.doseMount"
                          placeholder="请点击选择"
                          readonly
                          style="width: 100%;"
                          @click.native="openDialog(scope.$index, scope.row)"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="生产厂家" prop="merchantCompany" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.merchantCompany"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="生产批号" prop="batchNo" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.batchNo"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="用法用量" prop="useMount" align="left" >
                  <template slot-scope="scope">
                    <div>
                      用量
                      <el-input v-model="scope.row.useMount" placeholder="请输入" clearable style="width: 100px;"/>
                      <el-input v-model="scope.row.useUnit" placeholder="单位" clearable style="width: 80px;"/>
                      <el-input v-model="scope.row.useDay" placeholder="请输入" clearable style="width: 80px;"/>
                      日
                      <el-input v-model="scope.row.useTimes" placeholder="请输入" clearable style="width: 80px;"/>
                      次
                    </div>
                    <div >
                      给药途径
                      <el-input v-model="scope.row.useMethod" placeholder="请输入" clearable style="width: 60%"/>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="用药起止时间" prop="startTime" align="left" width="180">
                  <template slot-scope="scope">
                    <div style="display: flex;">
                      <div style="margin-right: 10px">从</div>
                      <div>
                        <el-date-picker
                          v-model="scope.row.startTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          style="width: 140px;"
                          placeholder="选择日期">
                        </el-date-picker></div>
                    </div>
                    <div style="display: flex">
                      <div style="margin-right: 10px">到</div>
                      <div>
                        <el-date-picker
                          v-model="scope.row.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          style="width: 140px;"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="用药原因" prop="drugReason" align="left" width="130">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.drugReason"
                      placeholder="请输入"
                      clearable
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="selectDrug(2, scope.$index)">选择药品</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </title-info>
        </div>
        <!-- 弹出框部分 -->
        <el-dialog title="选择剂型信息" :visible.sync="dialogDrugVisible" width="60%" append-to-body :close-on-click-modal="false">
          <div class="dosage-container">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item
                v-for="(category, index) in dosageData"
                :key="index"
                :name="index"
                :class="{ 'is-active': isActiveCategory(index) }"
              >
                <template #title>
                  <div class="collapse-title">
                    {{ category.categoryName }}
                  </div>
                </template>
                <div class="dosage-table">
                  <div
                    v-for="(item, itemIndex) in category.items"
                    :key="itemIndex"
                    class="dosage-table-item"
                    :class="{ 'selected-item': isSelectedItem(item) }"
                    @click="handleItemClick(category, item)"
                  >
                    {{ item }}
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="confirmSelection">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 选择药品弹出框 -->
        <el-dialog title="选择药品" :visible.sync="selectDrugDialogVisible" width="60%" append-to-body :before-close="closeSelectDrugDialog">
          <el-table v-loading="drugLoading" :data="drugList" stripe>
            <el-table-column label="药物名称" prop="productName" align="center" />
            <el-table-column label="生产厂家" prop="merchantCompany" align="center" />
            <el-table-column label="剂型" prop="doseMount" align="center" />
            <el-table-column label="给药途径" prop="useMethod" align="center" />
            <el-table-column label="每天执行次数" prop="useTimes" align="center" />
            <el-table-column label="用药起始时间" prop="startTime" align="center" />
            <el-table-column label="用药结束时间" prop="endTime" align="center" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="confirmSelectDrug(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="drugPageInfo.total > 0" :total="drugPageInfo.total" :page.sync="drugPageInfo.currentPage" :limit.sync="drugPageInfo.pageSize" @pagination="drugOnPagination" />
        </el-dialog>
        <div >
          <title-info title="事件详情" >
            <div slot="left" >
              <div style="display: flex; width: 100%; flex-wrap: wrap; margin-bottom: 20px;">
                <el-button size="small" @click="fillInRequirementsVisible = true">填写要求</el-button>
                <el-button size="small" @click="openUntowardeffectDescDialog('血常规检测')">血常规检测</el-button>
                <el-button size="small" @click="openUntowardeffectDescDialog('肝功能')">肝功能</el-button>
                <el-button size="small" @click="openUntowardeffectDescDialog('肾功能')">肾功能</el-button>
                <el-button size="small" @click="openUntowardeffectDescDialog('血脂分析')">血脂分析</el-button>
                <el-button size="small" @click="openUntowardeffectDescDialog('生命体征')">生命体征</el-button>
                <el-button size="small" @click="openUntowardeffectDescDialog('血气')">血气</el-button>
              </div>
              <el-dialog title="填写要求" :visible.sync="fillInRequirementsVisible" width="50%" append-to-body :close-on-click-modal="false">
                <div>
                  <el-table :data="fillInRequirementsData" :show-header="false" border style="width: 100%">
                    <el-table-column prop="key" align="center" width="20%" />
                    <el-table-column prop="value" width="60%" />
                  </el-table>
                </div>
              </el-dialog>
              <!-- 事件详情弹出框 -->
              <el-dialog
                :title="untowardeffectDescTitle"
                :visible.sync="untowardeffectDescDialogVisible"
                width="750px"
                append-to-body
                :close-on-click-modal="false"
              >
                <div>
                  <el-table
                    :data="untowardeffectDescList"
                    style="width: 680px"
                  >
                    <el-table-column
                      prop="key"
                      label="属性名称"
                      width="300px">
                      <template slot-scope="scope">
                        <div style="width: 280px">{{ scope.row.key }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="属性名称"
                      width="200px">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.value" placeholder="请输入值" style="width: 170px"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="单位"
                      width="180px">
                      <template slot-scope="scope">
                        <div v-if="scope.row.selectList && scope.row.selectList.length > 1">
                          <el-select v-model="scope.row.selectUnit" placeholder="选择" size="small" style="width: 150px">
                            <el-option v-for="(item, index) in scope.row.selectList" :key="index" :label="item" :value="item" />
                          </el-select>
                        </div>
                        <div  v-if="scope.row.selectList && scope.row.selectList.length === 1" style="width: 150px">
                          {{ scope.row.selectUnit }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div slot="footer" class="dialog-footer" style="margin-top: 20px;text-align: right">
                    <el-button @click="untowardeffectDescDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addModelToDesc">提交</el-button>
                  </div>
                </div>
              </el-dialog>
              <el-input
                type="textarea"
                style="width: 100%;"
                :rows="6"
                :maxlength="2000"
                v-model="models.baqsjRecordUntowardeffect.untowardeffectDesc"
                placeholder="请输入不良反应/事件过程描述(包括症状、体征、临床检验等)及处理情况(2000字之内):"
              />
              <div style="display: flex; width: 100%; flex-wrap: wrap; margin-top: 20px ">
                <el-form-item label="不良反应/事件名称" prop="baqsjRecordUntowardeffect.untowardeffectName" label-width="200px">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordUntowardeffect.untowardeffectName"
                  />
                </el-form-item>
                <el-form-item label="不良反应/事件发生时间" prop="baqsjRecordUntowardeffect.untowardeffectTime" label-width="200px">
                  <el-date-picker
                    :style="{ width: '300px' }"
                    v-model="models.baqsjRecordUntowardeffect.untowardeffectTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
                <el-form-item label="病历号/门诊号" prop="baqsjRecordUntowardeffect.patientNo" label-width="200px">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordUntowardeffect.patientNo"
                  />
                </el-form-item>
              </div>
              <div>

              </div>
              <el-form-item label="不良反应/事件的结果" prop="baqsjRecordUntowardeffect.untowardeffectResultType" label-width="400px">
                <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultType" style="display: flex;align-items: center;flex-wrap: wrap;">
                  <el-radio v-for="(item, index) in untowardeffectResultTypeList" :key="index" :label="item.value" style="display: flex;align-items: center;">
                    <div style="display: flex;align-items: center;">
                      {{ item.label }}
                      <!--        二维数据:              -->
                      <div v-if="models.baqsjRecordUntowardeffect.untowardeffectResultType && models.baqsjRecordUntowardeffect.untowardeffectResultType === 4 && item.value === 4" style="margin-left: 5px;display: flex;align-items: center;flex-wrap: wrap;">
                        (
                        <el-form-item label="表现" prop="baqsjRecordUntowardeffect.untowardeffectResultDesc" label-width="40px" style="margin-bottom: 0px">
                          <el-input
                            :style="{ width: '300px' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordUntowardeffect.untowardeffectResultDesc"
                          />
                        </el-form-item>
                        )
                      </div>
                      <div v-if="models.baqsjRecordUntowardeffect.untowardeffectResultType && models.baqsjRecordUntowardeffect.untowardeffectResultType === 5 && item.value === 5" style="margin-left: 5px;display: flex;align-items: center;flex-wrap: wrap;">
                        (
                        <el-form-item label="直接死因" prop="baqsjRecordUntowardeffect.untowardeffectResultReason" label-width="80px" style="margin-bottom: 0px">
                          <el-input
                            :style="{ width: '300px' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordUntowardeffect.untowardeffectResultReason"
                          />
                        </el-form-item>
                        <el-form-item label="死亡时间" prop="baqsjRecordUntowardeffect.untowardeffectResultDate" label-width="80px" style="margin-bottom: 0px">
                          <el-date-picker
                            :style="{ width: '300px' }"
                            v-model="models.baqsjRecordUntowardeffect.untowardeffectResultDate"
                            type="datetime"
                            placeholder="选择日期时间"
                          />
                        </el-form-item>
                        )
                      </div>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="停药或减量后反应/事件是否消失或减轻" prop="baqsjRecordUntowardeffect.untowardeffectResultStop" label-width="400px">
                <div style="display: flex;">
                  <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultStop">
                    <el-radio v-for="(item, index) in untowardeffectResultStopList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="再次使用可疑药品后是否再次出现同样反应/事件" prop="baqsjRecordUntowardeffect.untowardeffectResultReuse" label-width="400px">
                <div style="display: flex;">
                  <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultReuse">
                    <el-radio v-for="(item, index) in untowardeffectResultReuseList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="对原患疾病的影响" prop="baqsjRecordUntowardeffect.untowardeffectResultAffected" label-width="400px">
                <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultAffected" style="display: flex;align-items: center;flex-wrap: wrap;">
                  <el-radio v-for="(item, index) in untowardeffectResultAffectedList" :key="index" :label="item.value" style="display: flex;align-items: center;">
                    <div style="display: flex;align-items: center;">
                      {{ item.label }}
                      <!--        二维数据:              -->
                      <div v-if="models.baqsjRecordUntowardeffect.untowardeffectResultAffected && models.baqsjRecordUntowardeffect.untowardeffectResultAffected === 3 && item.value === 3" style="margin-left: 5px;display: flex;align-items: center;flex-wrap: wrap;">
                        (
                        <el-form-item label="表现" prop="baqsjRecordUntowardeffect.untowardeffectResultAffectedDesc" label-width="40px" style="margin-bottom: 0px">
                          <el-input
                            :style="{ width: '300px' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordUntowardeffect.untowardeffectResultAffectedDesc"
                          />
                        </el-form-item>
                        <el-form-item label="导致死亡" prop="baqsjRecordUntowardeffect.untowardeffectResultAffectedReason" label-width="80px" style="margin-bottom: 0px">
                          <el-input
                            :style="{ width: '300px' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordUntowardeffect.untowardeffectResultAffectedReason"
                          />
                        </el-form-item>
                        )
                      </div>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="用药与不良反应的出现有无合理的时间关系" prop="baqsjRecordUntowardeffect.untowardeffectResultTime" label-width="400px">
                <div style="display: flex;">
                  <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultTime">
                    <el-radio v-for="(item, index) in untowardeffectResultTimeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="反应是否符合该药已知的不良反应类型" prop="baqsjRecordUntowardeffect.untowardeffectResultKnown" label-width="400px">
                <div style="display: flex;">
                  <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultKnown">
                    <el-radio v-for="(item, index) in untowardeffectResultKnownList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="反应是否可用并用药的作用、患者病情的进展、其他治疗的影响来解释" prop="baqsjRecordUntowardeffect.untowardeffectResultExplain" label-width="400px">
                <div style="display: flex;">
                  <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultExplain">
                    <el-radio v-for="(item, index) in untowardeffectResultExplainList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <div style="display: flex">
                <div style="width: 400px; text-align: right;">关联性评价：</div>
                <div style="display: flex;flex-wrap: wrap;">
                  <div style="display: flex;flex-wrap: wrap;">
                    <el-form-item label="报告人" prop="baqsjRecordUntowardeffect.untowardeffectResultEvaluationReport" label-width="120px">
                      <div style="display: flex;">
                        <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultEvaluationReport">
                          <el-radio v-for="(item, index) in untowardeffectResultEvaluationReportList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                      </div>
                    </el-form-item>
                    <el-form-item label="签名" prop="baqsjRecordUntowardeffect.untowardeffectResultEvaluationReportSign" label-width="120px">
                      <el-input
                        :style="{ width: '200px' }"
                        placeholder="请输入"
                        v-model="models.baqsjRecordUntowardeffect.untowardeffectResultEvaluationReportSign"
                      />
                    </el-form-item>
                  </div>
                  <div style="display: flex;flex-wrap: wrap;">
                    <el-form-item label="报告单位" prop="baqsjRecordUntowardeffect.untowardeffectResultEvaluationUnit" label-width="120px">
                      <div style="display: flex;">
                        <el-radio-group v-model="models.baqsjRecordUntowardeffect.untowardeffectResultEvaluationUnit">
                          <el-radio v-for="(item, index) in untowardeffectResultEvaluationUnitList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                      </div>
                    </el-form-item>
                    <el-form-item label="签名" prop="baqsjRecordUntowardeffect.untowardeffectResultEvaluationUnitSign" label-width="120px">
                      <el-input
                        :style="{ width: '200px' }"
                        placeholder="请输入"
                        v-model="models.baqsjRecordUntowardeffect.untowardeffectResultEvaluationUnitSign"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
              <el-form-item label="生产企业请填写信息来源" prop="baqsjRecordUntowardeffect.reportUnitType" label-width="400px">
                <el-radio-group v-model="models.baqsjRecordUntowardeffect.reportUnitType">
                  <el-radio v-for="(item, index) in reportUnitTypeList1" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
                <el-input
                  v-if="models.baqsjRecordUntowardeffect.reportUnitType === '6'"
                  :style="{ width: '200px' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordUntowardeffect.reportUnitTypeOther"
                />
              </el-form-item>
            </div>
          </title-info>
        </div>
        <div >
          <title-info title="处置人填报" >
            <div slot="left" style="display: flex; width: 100%; flex-wrap: wrap; ">
              <div style="display: flex;width: 100%">
                <div style="width: 150px; text-align: right;">SAC评分：</div>
                <div style="margin-left: 100px;">
                  <div>
                    <el-form-item label="严重程度分级" prop="baqsjRecordPropertyEvaluation.eventLevel" label-width="120px">
                      <div style="display: flex;">
                        <el-radio-group v-model="models.baqsjRecordPropertyEvaluation.eventLevel">
                          <el-radio v-for="(item, index) in eventLevelList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                      </div>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="发生频率" prop="baqsjRecordPropertyEvaluation.eventFrequence" label-width="120px">
                      <div style="display: flex;">
                        <el-radio-group v-model="models.baqsjRecordPropertyEvaluation.eventFrequence">
                          <el-radio v-for="(item, index) in eventFrequenceList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div style="width: 100%" />
              <el-form-item label="SAC总分" prop="baqsjRecordPropertyEvaluation.sacScore" label-width="150px">
                <el-input-number
                  :style="{ width: '200px' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordPropertyEvaluation.sacScore"
                />
              </el-form-item>
              <div style="width: 100%"/>
              <el-form-item label="备注(2000字内)" prop="baqsjRecordPropertyEvaluation.eventEvaluate" label-width="150px" style="width: 100%">
                <el-input
                  :style="{ width: '100%' }"
                  :rows="4"
                  :maxlength="2000"
                  type="textarea"
                  placeholder="请输入备注"
                  v-model="models.baqsjRecordPropertyEvaluation.eventEvaluate"
                />
              </el-form-item>
            </div>
          </title-info>
        </div>
      </el-form>
    </div>
    <div v-if="thisDiv === 3">
      <div>
        <title-info title="上报人信息">
          <reporter-info slot="left" :form-data="models" :this-div="thisDiv" />
        </title-info>
      </div>
      <div>
        <title-info title="当事人信息">
          <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="当事患者信息">
          <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="事件信息">
          <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <!-- 怀疑用药 -->
      <div v-for="(drug, index) in models.baqsjRecordUntowardeffectDrugDoubtList" :key="index">
        <title-info title="怀疑用药">
          <div slot="left" style="width: 100%;">
            <table>
              <tr>
                <td class="td-title">批准文号</td>
                <td>{{ drug.approvedBatchNo || '' }}</td>
                <td class="td-title">商品名称</td>
                <td>{{ drug.productName || '' }}</td>
                <td class="td-title">通用名称</td>
                <td>{{ drug.generalName || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">剂型</td>
                <td>{{ drug.doseMount || '' }}</td>
                <td class="td-title">生产厂家</td>
                <td>{{ drug.merchantCompany || '' }}</td>
                <td class="td-title">生产批号</td>
                <td>{{ drug.batchNo || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">用法用量</td>
                <td colspan="3">
                  用量：{{ drug.useMount || '' }}{{ drug.useUnit || '' }}，{{ drug.useDay || '' }}日{{ drug.useTimes || '' }}次，给药途径：{{ drug.useMethod || '' }}
                </td>
                <td class="td-title">用药起止时间</td>
                <td>
                  从：{{ drug.startTime || '' }} 到：{{ drug.endTime || '' }}
                </td>
              </tr>
              <tr>
                <td class="td-title">用药原因</td>
                <td colspan="5">{{ drug.drugReason || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
      <!-- 并用药品 -->
      <div v-for="(drug, index) in models.baqsjRecordUntowardeffectDrugParellList" :key="index">
        <title-info title="并用药品">
          <div slot="left" style="width: 100%;">
            <table>
              <tr>
                <td class="td-title">批准文号</td>
                <td>{{ drug.approvedBatchNo || '' }}</td>
                <td class="td-title">商品名称</td>
                <td>{{ drug.productName || '' }}</td>
                <td class="td-title">通用名称</td>
                <td>{{ drug.generalName || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">剂型</td>
                <td>{{ drug.doseMount || '' }}</td>
                <td class="td-title">生产厂家</td>
                <td>{{ drug.merchantCompany || '' }}</td>
                <td class="td-title">生产批号</td>
                <td>{{ drug.batchNo || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">用法用量</td>
                <td colspan="3">
                  用量：{{ drug.useMount || '' }}{{ drug.useUnit || '' }}，{{ drug.useDay || '' }}日{{ drug.useTimes || '' }}次，给药途径：{{ drug.useMethod || '' }}
                </td>
                <td class="td-title">用药起止时间</td>
                <td>
                  从：{{ drug.startTime || '' }} 到：{{ drug.endTime || '' }}
                </td>
              </tr>
              <tr>
                <td class="td-title">用药原因</td>
                <td colspan="5">{{ drug.drugReason || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
      <!-- 事件详情 -->
      <div>
        <title-info title="事件详情">
          <div slot="left" style="width: 100%;">
            <table>
              <tr>
                <td class="td-title">不良反应/事件名称</td>
                <td>{{ models.baqsjRecordUntowardeffect.untowardeffectName || '' }}</td>
                <td class="td-title">不良反应/事件发生时间</td>
                <td>{{ models.baqsjRecordUntowardeffect.untowardeffectTime || '' }}</td>
                <td class="td-title">病历号/门诊号</td>
                <td>{{ models.baqsjRecordUntowardeffect.patientNo || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">不良反应/事件的结果</td>
                <td colspan="5">
                  {{ getUntowardeffectResultType(models.baqsjRecordUntowardeffect.untowardeffectResultType) }}
                  {{ models.baqsjRecordUntowardeffect.untowardeffectResultDesc ? `(${models.baqsjRecordUntowardeffect.untowardeffectResultDesc})` : '' }}
                </td>
              </tr>
              <tr>
                <td class="td-title">停药或减量后反应/事件是否消失或减轻</td>
                <td>{{ getUntowardeffectResultStop(models.baqsjRecordUntowardeffect.untowardeffectResultStop) }}</td>
                <td class="td-title">再次使用可疑药品后是否再次出现同样反应/事件</td>
                <td>{{ getUntowardeffectResultReuse(models.baqsjRecordUntowardeffect.untowardeffectResultReuse) }}</td>
              </tr>
              <tr>
                <td class="td-title">对原患疾病的影响</td>
                <td colspan="5">
                  {{ getUntowardeffectResultAffected(models.baqsjRecordUntowardeffect.untowardeffectResultAffected) }}
                  {{ models.baqsjRecordUntowardeffect.untowardeffectResultAffectedDesc ? `(${models.baqsjRecordUntowardeffect.untowardeffectResultAffectedDesc})` : '' }}
                </td>
              </tr>
              <tr>
                <td class="td-title">用药与不良反应的出现有无合理的时间关系</td>
                <td>{{ getUntowardeffectResultTime(models.baqsjRecordUntowardeffect.untowardeffectResultTime) }}</td>
                <td class="td-title">反应是否符合该药已知的不良反应类型</td>
                <td>{{ getUntowardeffectResultKnown(models.baqsjRecordUntowardeffect.untowardeffectResultKnown) }}</td>
              </tr>
              <tr>
                <td class="td-title">反应是否可用并用药的作用、患者病情的进展、其他治疗的影响来解释</td>
                <td colspan="5">{{ getUntowardeffectResultExplain(models.baqsjRecordUntowardeffect.untowardeffectResultExplain) }}</td>
              </tr>
              <tr>
                <td class="td-title">备注</td>
                <td colspan="5">{{ models.baqsjRecordPropertyEvaluation.eventEvaluate || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
    </div>
  </div>
</template>

<script>
import { doSaveMedicalBadReaction, getBaqsjRecordUntowardeffectDrug } from '@/api/report/reportForm'

import titleInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/titleInfo.vue'
import reporterInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/reporterInfo.vue'
import partyInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/partyInfo.vue'
import patientInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/patientInfo.vue'
import eventInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/eventInfo.vue'

export default {
  name: 'MedicalBadReaction',
  components: { titleInfo, reporterInfo, partyInfo, patientInfo, eventInfo },
  data() {
    return {
      // 当前显示的div：1 dialog 2 详情 3 处置
      thisDiv: 0,
      models: {
        baqsjRecordUntowardeffect: {
          untowardeffectResultStop: '',
          untowardeffectResultType: '',
          untowardeffectResultReuse: '',
          untowardeffectResultAffected: ''
        },
        baqsjRecordProperty: {
          // 1.患者类型：0-住院病人;1-门诊病人;2-急诊病人
          patientType: '0',
          patientNo1: ''
        },
        baqsjRecordPropertyEvaluation: {},
        baqsjRecordUntowardeffectDrugDoubtList: [],
        baqsjRecordUntowardeffectDrugParellList: [],
        eventDescription: '' // 不良反应/事件过程描述
      },
      // ---------------------------------------------
      // 血常规检测弹出框
      dalog1: [
        {
          'title': '血常规检测',
          'fields': [
            { 'key': '血红蛋白(Hbg)', 'value': '', 'selectList': ['g/L'], 'selectUnit': 'g/L' },
            { 'key': '红细胞(RBC)', 'value': '', 'selectList': ['10^12/L'], 'selectUnit': '10^12/L' },
            { 'key': '白细胞 (WBC)', 'value': '', 'selectList': ['10^9/L'], 'selectUnit': '10^9/L' },
            { 'key': '中性杆状核粒细胞', 'value': '', 'selectList': ['10^12/L'], 'selectUnit': '10^12/L' },
            { 'key': '中性分叶核粒细胞', 'value': '', 'selectList': ['%', '10^9/L'], 'selectUnit': '%' },
            { 'key': '啫碱性粒细胞', 'value': '', 'selectList': ['%', '10^9/L'], 'selectUnit': '%' },
            { 'key': '淋巴细胞', 'value': '', 'selectList': ['%', '10^9/L'], 'selectUnit': '%' },
            { 'key': '单核细胞', 'value': '', 'selectList': ['%', '10^9/L'], 'selectUnit': '%' },
            { 'key': '网织红细胞 (Ret) 百分数', 'value': '', 'selectList': ['%', '10^9/L'], 'selectUnit': '%' },
            { 'key': '网织红细胞生成指数 (RPI)', 'value': '', 'selectList': [], 'selectUnit': '' },
            { 'key': '红细胞沉降率(ESR)', 'value': '', 'selectList': ['mm/h'], 'selectUnit': 'mm/h' },
            { 'key': '血细胞比容 (Hct)', 'value': '', 'selectList': ['L/L'], 'selectUnit': 'L/L' },
            { 'key': '平均红细胞容积(MCV)', 'value': '', 'selectList': ['fl'], 'selectUnit': 'fl' },
            { 'key': '血小板计数', 'value': '', 'selectList': ['10^9/L'], 'selectUnit': '10^9/L' },
            { 'key': '血小板平均容积(MPV)', 'value': '', 'selectList': ['fl'], 'selectUnit': 'fl' },
            { 'key': '血小板分布宽度(PDW)', 'value': '', 'selectList': ['%'], 'selectUnit': '%' }
          ]
        },
        {
          'title': '肝功能',
          'fields': [
            { 'key': '血清直接胆红素测定D-Bil', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '血清间接胆红素测定I-Bil', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '血清谷丙转酶测定ALT(SG-PT)', 'value': '', 'selectList': ['U/L'], 'selectUnit': 'U/L' },
            { 'key': '血清谷草转氨酶测定AST', 'value': '', 'selectList': ['U/L'], 'selectUnit': 'U/L' },
            { 'key': '血清总蛋白测定(TP)', 'value': '', 'selectList': ['g/L'], 'selectUnit': 'g/L' },
            { 'key': '血清白蛋白测定(ALB)', 'value': '', 'selectList': ['g/L'], 'selectUnit': 'g/L' },
            { 'key': '血清总胆红素测定T-Bil', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' }
          ]
        },
        {
          'title': '肾功能',
          'fields': [
            { 'key': '肌酐(Cr)', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '尿素氮 (BUN)', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '尿酸(UA)', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' }
          ]
        },
        {
          'title': '血脂分析',
          'fields': [
            { 'key': '总胆固醇(TCH)', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '高密度脂蛋白胆固醇(HDL-C)', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '低密度脂蛋白胆固醇(LDL-C)', 'value': '', 'selectList': ['umol/L'], 'selectUnit': 'umol/L' },
            { 'key': '甘油三脂(TG)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' }
          ]
        },
        {
          'title': '生命体征',
          'fields': [
            { 'key': '心率', 'value': '', 'selectList': ['次'], 'selectUnit': '次' },
            { 'key': '呼吸频率', 'value': '', 'selectList': ['次'], 'selectUnit': '次' },
            { 'key': '收缩压', 'value': '', 'selectList': ['mmHg'], 'selectUnit': 'mmHg' },
            { 'key': '收缩压', 'value': '', 'selectList': ['mmHg'], 'selectUnit': 'mmHg' },
            { 'key': '体温', 'value': '', 'selectList': ['℃'], 'selectUnit': '℃' }
          ]
        },
        {
          'title': '血气',
          'fields': [
            { 'key': '血钾(K+)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '血钾(K+)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '血氯化物(C1-)', 'value': '', 'selectList': [''], 'selectUnit': '' },
            { 'key': '酸碱度(PH)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '氧分压(PO2)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '二氧化碳分压(PCO2)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '实际碳酸氢盐(HCO3)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '二氧化碳总量(TCO2)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '全血剩余碱(BEb)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '细胞外液剩余碱(BEecf)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '标准碳酸氢根(SBC)', 'value': '', 'selectList': ['mmol/L'], 'selectUnit': 'mmol/L' },
            { 'key': '阴离子间隙(AG)', 'value': '', 'selectList': ['16mmol'], 'selectUnit': '16mmol' },
            { 'key': '氧饱和度(SO2C)', 'value': '', 'selectList': [''], 'selectUnit': '' }
          ]
        }
      ],
      untowardeffectDescDialogVisible: false,
      untowardeffectDescinfoShow: [],
      untowardeffectDescList: [],
      untowardeffectDescTitle: '',
      fillInRequirementsVisible: false,
      fillInRequirementsData: [
        { 'key': '套用格式', 'value': '何时出现何不良反应，何时停药，采取何措施，何时不良反应治煎或好转。' },
        { 'key': '要求', 'value': '何时出现何不良反应，何时停药，采取何措施，何时不良反应治煎或好转。' },
        { 'key': '三个时间', 'value': '1.不良反应发生的时间。\n2.采取措施干预不良反应的时间。\n3.不良反应终结的时间。' },
        { 'key': '三个项目', 'value': '1.事件初始发生时的相关症状、体征和相关检查。\n2.动态变化的相关症状、体征和相关检查。\n3.采取的千预措施后的症状、体征和相关检查。' },
        { 'key': '两个尽可能', 'value': '1.不自反店/重件的表现填写时要尽可能明确。\n2.具体有关的辅助检查结果要尽可能明确填写。' }
      ],
      // ---------------------------------------------
      loading: false,
      dialogVisible: false,
      dialogDetailVisible: false,
      submitLoading: false,
      saveLoading: false,
      rules: {},
      reportTypeList: [
        { value: '1', label: '新的' },
        { value: '2', label: '一般' },
        { value: '3', label: '严重' }
      ],
      reportUnitTypeList: [
        { value: '1', label: '医疗机构' },
        { value: '2', label: '经营企业' },
        { value: '3', label: '生产企业' },
        { value: '4', label: '个人' },
        { value: '5', label: '其他' }
      ],
      untowardeffectResultTypeList: [
        { value: 0, label: '痊愈' },
        { value: 1, label: '好转' },
        { value: 2, label: '未好转' },
        { value: 3, label: '不详' },
        { value: 4, label: '有后遗症' },
        { value: 5, label: '死亡' }
      ],
      untowardeffectResultStopList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' },
        { value: 2, label: '不明' },
        { value: 3, label: '未停药或未减量' }
      ],
      untowardeffectResultReuseList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' },
        { value: 2, label: '不明' },
        { value: 3, label: '未再使用' }
      ],
      untowardeffectResultAffectedList: [
        { value: 0, label: '不明显' },
        { value: 1, label: '病程延长' },
        { value: 2, label: '病情加重' },
        { value: 3, label: '导致后遗症' }
      ],
      untowardeffectResultExplainList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' },
        { value: 2, label: '不明' }
      ],
      untowardeffectResultKnownList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' },
        { value: 2, label: '不明' }
      ],
      untowardeffectResultTimeList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' },
        { value: 2, label: '不明' }
      ],
      untowardeffectResultEvaluationReportList: [
        { value: 0, label: '肯定' },
        { value: 1, label: '很可能' },
        { value: 2, label: '可能' },
        { value: 3, label: '可能无关' },
        { value: 4, label: '待评价' },
        { value: 5, label: '无法评价' }
      ],
      untowardeffectResultEvaluationUnitList: [
        { value: 0, label: '肯定' },
        { value: 1, label: '很可能' },
        { value: 2, label: '可能' },
        { value: 3, label: '可能无关' },
        { value: 4, label: '待评价' },
        { value: 5, label: '无法评价' }
      ],
      reportUnitTypeList1: [
        { value: '1', label: '医疗机构' },
        { value: '2', label: '经营企业' },
        { value: '3', label: '个人' },
        { value: '4', label: '文献报道' },
        { value: '5', label: '上市后研究' },
        { value: '6', label: '其他' }
      ],
      eventLevelList: [
        { value: 0, label: '极重度' },
        { value: 1, label: '重度' },
        { value: 2, label: '中度' },
        { value: 3, label: '轻度' },
        { value: 4, label: '无伤害' }
      ],
      eventFrequenceList: [
        { value: 0, label: '数周一次' },
        { value: 1, label: '一年数次' },
        { value: 2, label: '1-2年1次' },
        { value: 3, label: '2-5年1次' },
        { value: 4, label: '五年以上1次' }
      ],
      // ---------------------------------------------
      selectDoseMountDialogVisible: false, // 控制选择剂型
      selectDrugDialogVisible: false, // 控制选择药品弹出框的显示
      selectDrugForm: {
        approvedBatchNo: '', // 批准文号
        productName: '', // 商品名称
        generalName: '', // 通用名称
        merchantCompany: '', // 生产厂家
        batchNo: '', // 生产批号
        useMount: '', // 用法用量
        startTime: '', // 用药起始时间
        endTime: '', // 用药结束时间
        drugReason: '' // 用药原因
      },
      drugType: 1, // 类型:1-怀疑用药,2-并用药品
      callbackDrugIndex: 1, // 回调的药品索引
      drugList: [],
      drugLoading: false,
      // 查询条件
      searchInfo: {},
      // 分页组件
      drugPageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // ---------------------  ------------------------
      tableData: [
        {
          approvedBatchNo: '',
          productName: '',
          generalName: '',
          doseMount: ''
        }
        // 其他行数据
      ],
      dialogDrugVisible: false, // 控制弹出框的显示状态
      activeNames: [], // 当前展开的折叠面板索引
      selectedCategory: null, // 当前选中的分类
      selectedItems: [], // 当前选中的项目
      dosageData: [
        {
          categoryName: '口服制剂',
          items: [
            '片剂', '丸剂', '分散片', '酊剂', '合剂', '煎膏剂', '胶囊', '包衣片', '汤剂', '缓释片', '颗粒', '徽丸', '肠溶片', '控释片', '干混悬剂', '咀嚼片', '糖浆', '滴丸', '含片', '缓释胶囊', '缓释颗粒', '混悬滴剂', '浸膏片', '控释胶囊', '口服溶液', '口腔崩解片', '浓缩丸', '泡腾颗粒', '软胶囊', '舌下片', '双层片', '双释放肠溶胶囊', '双释放胶囊', '吸入溶液', '干糖浆', '缓释丸剂', '咀嚼胶', '口服冻干粉', '糖丸', '缓释小丸', '速释片', '口服缓释混悬液', '丹剂', '大蜜丸', '肠溶微丸胶囊', '肠溶微丸', '肠溶微粒胶囊', '肠溶颗粒', '肠溶胶丸', '肠溶胶囊', '肠溶缓释片', '肠溶缓释胶囊', '醑', '口服乳', '缓释干混悬剂', '口服液', '颗粒剂', '口胶', '混悬颗粒', '控释口颊片'
          ]
        },
        {
          categoryName: '注射制剂',
          items: ['粉针剂', '注射液', '注射剂', '混悬注射液', '注射用乳', '混悬注射剂']
        },
        {
          categoryName: '其它',
          items: [
            '栓剂', '混悬剂', '逶皮贴剂', '巴布膏', '散剂', '搽剂', '洗剂', '乳剂', '喷雾剂', '胶剂', '滴耳剂', '膜剂', '酒剂', '锭剂', '露剂', '茶剂', '水剂', '灌肠剂', '粉剂', '贴剂', '滴耳液', '液体', '染发剂', '泡腾片', '滴眼液', '乳膏', '溶液', '水煎剂', '敷料', '软膏', '鼻用吸入剂', '气体', '外用冻干制剂', '明胶纤雏', '缓释逶皮贴', '熨剂', '控释诱皮贴', '消毒液', '控释贴', '试剂', '冻干制剂', '划痕剂', '缓释微粒', '醑', '细粒', '鼻用喷霎剂', '冲洗液', '滴鼻液', '滴剂', '粉霎剂', '膏剂', '含漱液', '糊剂', '混悬液', '胶浆剂', '浸膏', '口腔贴片', '流浸膏', '凝胶', '气雾剂', '乳胶', '霜剂', '涂剂', '涂膜剂', '外用凝胶', '雾化溶液', '吸入混悬液', '吸入剂', '洗发剂', '洗液', '橡胶膏', '消毒剂', '眼膏', '眼用凝胶', '阴道胶囊', '阴道泡騰胶囊', '阴道泡腾片', '阴道片', '阴道软胶囊', '阴道栓', '阴道药膜', '油剂', '植入剂', '中药材', '灌洗液', '缓释混悬液', '缓释凝胶', '缓释植入剂', '泡沫剂', '湿敷剂', '涂膜', '外用片', '阴道灌注液', '硬膏', '灸剂', '喷剂', '微粒', '体内诊断试剂'
          ]
        },
        {
          categoryName: '不详',
          items: ['不详']
        }
      ],
      currentRowIndex: null, // 当前选中的行索引
      currentRow: null // 当前选中的行数据
    }
  },
  created() {
  },
  methods: {
    handleClose(val) {
      this.dialogVisible = false
      // 传到父组件
      this.$emit('close', val)
    },
    handleDetailClose() {
      this.dialogDetailVisible = false
    },
    getDetail(info) {
      this.models = {
        ...info,
        medicalInvolvedArr: info.baqsjRecordHandle && info.baqsjRecordHandle.medicalInvolved ? info.baqsjRecordHandle.medicalInvolved.split(',') : [],
        otherInvolvedArr: info.baqsjRecordHandle && info.baqsjRecordHandle.otherInvolved ? info.baqsjRecordHandle.otherInvolved.split(',') : [],
        baqsjRecordUntowardeffectDrugDoubtList: info.baqsjRecordUntowardeffect.baqsjRecordUntowardeffectDrugDoubtList || [],
        baqsjRecordUntowardeffectDrugParellList: info.baqsjRecordUntowardeffect.baqsjRecordUntowardeffectDrugParellList || [],
        baqsjRecordUntowardeffect: {
          ...info.baqsjRecordUntowardeffect,
          untowardeffectResultStop: info.baqsjRecordUntowardeffect.untowardeffectResultStop || '',
          untowardeffectResultType: info.baqsjRecordUntowardeffect.untowardeffectResultType || '',
          untowardeffectResultReuse: info.baqsjRecordUntowardeffect.untowardeffectResultReuse || '',
          untowardeffectResultAffected: info.baqsjRecordUntowardeffect.untowardeffectResultAffected || ''
        },
        baqsjRecordPropertyEvaluation: info.baqsjRecordPropertyEvaluation || {}
      };
    },
    editInfo(ruleInfo, info) {
      this.thisDiv = 2
      this.dialogVisible = true
      this.rules = ruleInfo
      this.getDetail(info)
    },
    detail(info) {
      this.thisDiv = 3
      this.dialogDetailVisible = true
      this.getDetail(info)
    },
    open(ruleInfo, modelInfo) {
      // 弹出框
      this.thisDiv = 1
      this.rules = {
        ...ruleInfo
      }
      this.models = {
        ...modelInfo,
        eventNo: 'MedicalBadReaction',
        eventName: '药物相关-药物不良反应事件',
        baqsjRecordUntowardeffectDrugDoubtList: [],
        baqsjRecordUntowardeffectDrugParellList: [],
        baqsjRecordUntowardeffect: {
          untowardeffectResultStop: ''
        },
        baqsjRecordPropertyEvaluation: {},
        // 其他复选框
        reportTypeArr: [],
        reportUnitTypeArr: [],
        // 不良反应/事件过程描述(包括症状、体征、临床检验等)及处理情况(2000字之内)
        untowardeffectDescinfoShow: []
      }
      this.dialogVisible = true
    },
    submitAction() {
      // 上报
      this.models.auditStatus = 2
      this.actionRequest()
    },
    saveAction(item) {
      // 草稿
      this.models.auditStatus = 1
      this.actionRequest()
    },
    actionRequest() {
      // 新增、编辑、暂存
      this.$refs['generateForm'].validate(valid => {
        if (valid) {
          this.$message({
            message: '正在操作请稍等...',
            type: 'warning'
          })
          this.saveLoading = true
          this.submitLoading = true
          this.models.baqsjRecordUntowardeffect.baqsjRecordUntowardeffectDrugDoubtList = this.models.baqsjRecordUntowardeffectDrugDoubtList
          this.models.baqsjRecordUntowardeffect.baqsjRecordUntowardeffectDrugParellList = this.models.baqsjRecordUntowardeffectDrugParellList
          doSaveMedicalBadReaction(this.models).then(res => {
            if (res.resStatus !== 500) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.saveLoading = false
              this.submitLoading = false
              // 关闭弹出框
              this.dialogVisible = false
              this.handleClose(1)
            } else {
              this.$message({
                type: 'error',
                message: '操作失败!'
              })
              this.saveLoading = false
              this.submitLoading = false
            }
          })
        } else {
          this.$message({
            message: '请填写必填项',
            type: 'warning'
          })
        }
      })
    },
    getUntowardeffectResultType(value) {
      const item = this.untowardeffectResultTypeList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getUntowardeffectResultStop(value) {
      const item = this.untowardeffectResultStopList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getUntowardeffectResultReuse(value) {
      const item = this.untowardeffectResultReuseList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getUntowardeffectResultAffected(value) {
      const item = this.untowardeffectResultAffectedList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getUntowardeffectResultTime(value) {
      const item = this.untowardeffectResultTimeList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getUntowardeffectResultKnown(value) {
      const item = this.untowardeffectResultKnownList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getUntowardeffectResultExplain(value) {
      const item = this.untowardeffectResultExplainList.find(item => item.value === value);
      return item ? item.label : '';
    },
    // -----------------------------------------
    // 用药相关
    addUntowardeffectDrugRow(type) {
      if (type === 1) {
        this.models.baqsjRecordUntowardeffectDrugDoubtList.push({
          'approvedBatchNo': '',
          'productName': '',
          'generalName': '',
          'doseMount': '',
          'merchantCompany': '',
          'batchNo': '',
          'useMount': '',
          'useUnit': '',
          'useDay': '',
          'useTimes': '',
          'useMethod': '',
          'startTime': '',
          'endTime': '',
          'drugReason': ''
        })
      } else {
        this.models.baqsjRecordUntowardeffectDrugParellList.push({
          'approvedBatchNo': '',
          'productName': '',
          'generalName': '',
          'doseMount': '',
          'merchantCompany': '',
          'batchNo': '',
          'useMount': '',
          'useUnit': '',
          'useDay': '',
          'useTimes': '',
          'useMethod': '',
          'startTime': '',
          'endTime': '',
          'drugReason': ''
        })
      }
    },
    delUntowardeffectDrugRow(type, index) {
      if (type === 1) {
        this.models.baqsjRecordUntowardeffectDrugDoubtList.splice(index, 1)
      } else {
        this.models.baqsjRecordUntowardeffectDrugParellList.splice(index, 1)
      }
    },
    // 打开选择药品弹出框
    selectDrug(type, index) {
      // 先选择患者信息
      if (!this.models.baqsjRecordProperty.patientName) {
        this.$message.error('请先选择患者信息')
        return
      }
      // 当前类型便于回传数据
      this.drugType = type
      this.callbackDrugIndex = index
      // 获取药品数据
      this.onSearch()
      this.selectDrugDialogVisible = true
    },
    // 搜索
    onSearch() {
      this.drugPageInfo.currentPage = 1
      this.getList()
    },
    // 重置
    resetQuery() {
      this.timeValue = []
      this.drugPageInfo.currentPage = 1
      this.searchInfo = {}
      this.getList()
    },
    // 分页
    drugOnPagination(obj) {
      this.drugPageInfo.currentPage = obj.page
      this.drugPageInfo.pageSize = obj.limit
      this.getList()
    },
    // 列表数据
    getList() {
      const params = {
        ...this.searchInfo,
        ...this.drugPageInfo,
        drugType: this.drugType,
        patientName: this.models.baqsjRecordProperty.patientName
      }
      getBaqsjRecordUntowardeffectDrug(params).then(res => {
        const data = res.records
        this.drugList = data
        this.drugPageInfo.total = res.total
      })
    },
    // 关闭选择药品弹出框
    closeSelectDrugDialog() {
      this.selectDrugDialogVisible = false
      this.selectDrugForm = {} // 清空表单数据
    },
    confirmSelectDrug(item) {
      let info = {}
      // 获取当前值
      if (this.drugType === 1) {
        info = this.models.baqsjRecordUntowardeffectDrugDoubtList[this.callbackDrugIndex]
      } else {
        info = this.models.baqsjRecordUntowardeffectDrugParellList[this.callbackDrugIndex]
      }
      // 对某些字段进行修改
      info = {
        ...info,
        productName: item.productName,
        merchantCompany: item.merchantCompany,
        doseMount: item.doseMount,
        useMethod: item.useMethod,
        useTimes: item.useTimes,
        startTime: item.startTime,
        endTime: item.endTime
      }
      // 回填当前值
      if (this.drugType === 1) {
        this.models.baqsjRecordUntowardeffectDrugDoubtList.splice(this.callbackDrugIndex, 1, info)
      } else {
        this.models.baqsjRecordUntowardeffectDrugParellList.splice(this.callbackDrugIndex, 1, info)
      }
      // 关闭弹出框
      this.closeSelectDrugDialog()
    },
    // -----------------------------------------
    openDialog(index, row) {
      // 打开弹出框
      this.dialogDrugVisible = true
      this.currentRowIndex = index
      this.currentRow = row
    },
    isActiveCategory(index) {
      // 判断当前分类是否是选中的分类
      return this.selectedCategory && this.selectedCategory.index === index
    },
    handleChange(val) {
      // 折叠面板切换时的处理
      this.activeNames = val
    },
    handleItemClick(category, item) {
      // 点击项目时的处理
      this.selectedCategory = category
      this.selectedItems = [item]
      // 自动定位到选中的位置
      this.scrollToSelected()
    },
    scrollToSelected() {
      // 实现自动定位到选中的位置的逻辑
      // 这里可以使用原生的 DOM 操作或者 Vue 的 refs 来实现
      // 示例：this.$refs.selectedItem.scrollIntoView()
    },
    confirmSelection() {
      // 确认选择的处理
      if (this.selectedItems.length > 0) {
        // 如果有选中的值，回填到表格
        this.currentRow.doseMount = this.selectedItems[0]
      } else {
        // 如果没有选中的值，保持原值
        this.currentRow.doseMount = ''
      }
      this.dialogDrugVisible = false
    },
    handleCancel() {
      // 取消选择的处理
      this.dialogDrugVisible = false
    },
    isSelectedItem(item) {
      // 判断当前项是否是选中的项
      return this.selectedItems.includes(item)
    },
    // -----------------------------------------
    openUntowardeffectDescDialog(item) {
      this.untowardeffectDescDialogVisible = true
      this.untowardeffectDescTitle = item

      // 获取当前已有的描述内容
      const existingDesc = this.models.baqsjRecordUntowardeffect.untowardeffectDesc || ''

      // 将已有的描述内容按行拆分为数组
      const existingLines = existingDesc.split('\n').map(line => line.trim()).filter(line => line !== '')

      // 找到与当前标题匹配的行内容
      const existingLine = existingLines.find(line => line.startsWith(item + ':'))
      if (existingLine) {
        // 提取该行的内容部分（去掉标题）
        const existingContent = existingLine.substring(item.length + 1)

        // 将内容按分号分隔为数组
        const existingItems = existingContent.split(';').map(item => item.trim()).filter(item => item !== '')

        // 初始化表单数据
        this.untowardeffectDescList = this.dalog1.find(res => res.title === item).fields.map(field => {
          const existingItem = existingItems.find(item => item.startsWith(field.key + ':'))
          if (existingItem) {
            const [key, value] = existingItem.split(':').map(part => part.trim())
            return {
              ...field,
              value: value.split(' ')[0], // 提取数值部分
              selectUnit: value.split(' ')[1] || field.selectUnit // 提取单位部分
            }
          }
          return field
        })
      } else {
        // 如果没有找到匹配的行，初始化为空表单
        this.untowardeffectDescList = this.dalog1.find(res => res.title === item).fields
      }
    },
    // 添加到描述中
    addModelToDesc() {
      // 获取当前弹出框中的数据
      const currentData = this.untowardeffectDescList

      // 将当前数据格式化为字符串，每一项用分号分隔，末尾也加上分号
      const formattedData = currentData
        .filter(item => item.value !== '') // 过滤掉未填写的项
        .map(item => `${item.key}:${item.value}${item.selectUnit ? ` ${item.selectUnit}` : ''}`)
        .join('; ') + ';' // 使用分号分隔每一项，并在末尾加上分号

      // 获取当前已有的描述内容，确保其不会是 undefined
      const existingDesc = this.models.baqsjRecordUntowardeffect.untowardeffectDesc || ''

      // 获取当前弹出框的标题（模型类型）
      const currentTitle = this.untowardeffectDescTitle

      // 将已有的描述内容按行拆分为数组，每一行以换行符分隔
      const existingLines = existingDesc.split('\n').map(line => line.trim()).filter(line => line !== '')

      // 创建一个新数组来存储更新后的内容
      const updatedLines = existingLines.map(line => {
        // 检查当前行是否与当前弹出框的标题匹配
        if (line.startsWith(currentTitle + ':')) {
          // 如果匹配，则替换这一行的内容
          return `${currentTitle}:${formattedData}`
        }
        // 如果不匹配，则保留原有内容
        return line
      })

      // 如果当前标题的内容是新增的（不存在于已有内容中），则追加到数组中
      if (!existingLines.some(line => line.startsWith(currentTitle + ':'))) {
        updatedLines.push(`${currentTitle}:${formattedData}`)
      }

      // 将更新后的数组转换回字符串格式，使用换行符分隔每一行
      const updatedDesc = updatedLines.join('\n')

      // 更新到模型中
      this.models.baqsjRecordUntowardeffect.untowardeffectDesc = updatedDesc

      // 关闭弹出框
      this.untowardeffectDescDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}

.dosage-container {
  max-height: 600px;
  overflow-y: auto;
}

.dosage-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 10px;
}

.dosage-table-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.dosage-table-item:hover {
  background-color: #f5f7fa;
  border-color: #c6e2ff;
}

/* 选中项的样式 */
.selected-item {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
